<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行管理系统</title>
    <style>
        /* ===== 全局样式 ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            transition: all 0.3s ease;
        }
        
        body {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .hidden {
            display: none !important;
        }

        .loading {
            position: relative;
            pointer-events: none;
            opacity: 0.7;
        }

        .loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* ===== 登录界面 ===== */
        #loginContainer {
            width: 100%;
            max-width: 500px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            animation: fadeIn 0.5s ease-out;
        }

        .login-header {
            background: #2c3e50;
            color: white;
            padding: 25px;
            text-align: center;
            font-size: 1.8rem;
            position: relative;
        }

        .role-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            background: #f5f7fa;
        }

        .role-tab {
            flex: 1;
            padding: 18px;
            text-align: center;
            cursor: pointer;
            font-weight: 500;
            color: #7f8c8d;
        }

        .role-tab.active {
            background: white;
            color: #2c3e50;
            border-bottom: 3px solid #3498db;
            font-weight: bold;
        }

        .login-form {
            padding: 30px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            color: #555;
            font-weight: bold;
            font-size: 1.1rem;
        }

        .form-group input {
            width: 100%;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1.1rem;
        }

        .form-group input:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .login-btn {
            width: 100%;
            padding: 14px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1.2rem;
            cursor: pointer;
            font-weight: bold;
            margin-top: 10px;
        }

        .login-btn:hover {
            background: #2980b9;
        }

        .error-message {
            color: #e74c3c;
            font-size: 0.95rem;
            margin-top: 8px;
            display: none;
        }

        /* ===== 主系统界面 ===== */
        #mainSystem {
            width: 100%;
            max-width: 1200px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: none;
        }

        header {
            background: #2c3e50;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
        }

        .user-area {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-weight: bold;
        }

        .logout-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }

        .logout-btn:hover {
            background: #c0392b;
        }

        /* ===== 主体布局 ===== */
        .main-container {
            display: flex;
            min-height: 600px;
        }

        /* ===== 左侧菜单栏 ===== */
        .sidebar {
            width: 250px;
            background: #34495e;
            color: white;
            padding: 20px 0;
        }

        .sidebar h3 {
            padding: 15px 25px;
            font-size: 1.3rem;
            border-bottom: 1px solid #40576b;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .sidebar h3 i {
            margin-right: 10px;
        }

        .menu {
            list-style: none;
        }

        .menu li {
            margin-bottom: 5px;
        }

        .menu a {
            display: flex;
            align-items: center;
            padding: 15px 25px;
            color: #ecf0f1;
            text-decoration: none;
            border-left: 4px solid transparent;
        }

        .menu a:hover, .menu a.active {
            background: #2c3e50;
            color: white;
            border-left: 4px solid #3498db;
        }

        .menu a i {
            margin-right: 12px;
            font-size: 1.2rem;
        }

        /* ===== 右侧内容区 ===== */
        .content {
            flex: 1;
            padding: 30px;
            background: #f9f9f9;
            min-height: 600px;
        }

        .page-title {
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
        }

        .page-title i {
            margin-right: 12px;
        }

        /* ===== 客户管理界面 ===== */
        .search-area {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .search-input {
            flex: 1;
            min-width: 300px;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1.1rem;
        }

        .search-btn, .add-btn {
            padding: 14px 25px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }

        .search-btn i, .add-btn i {
            margin-right: 8px;
        }

        .search-btn {
            background: #3498db;
            color: white;
        }

        .search-btn:hover {
            background: #2980b9;
        }

        .add-btn {
            background: #2ecc71;
            color: white;
        }

        .add-btn:hover {
            background: #27ae60;
        }

        /* ===== 表格样式 ===== */
        .data-table-container {
            overflow-x: auto;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }

        .data-table th, .data-table td {
            padding: 16px;
            text-align: left;
            border: 1px solid #e0e0e0;
        }

        .data-table th {
            background: #3498db;
            color: white;
            font-weight: bold;
            font-size: 1.1rem;
        }

        .data-table tr:nth-child(even) {
            background: #f5f7fa;
        }

        .data-table tr:hover {
            background: #e3f2fd;
        }

        .action-btn {
            padding: 8px 15px;
            margin-right: 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
        }

        .action-btn i {
            margin-right: 5px;
        }

        .edit-btn {
            background: #f39c12;
            color: white;
        }

        .edit-btn:hover {
            background: #d35400;
        }

        .delete-btn {
            background: #e74c3c;
            color: white;
        }

        .delete-btn:hover {
            background: #c0392b;
        }

        /* ===== 分页导航 ===== */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .page-btn {
            padding: 10px 16px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            min-width: 45px;
            text-align: center;
        }

        .page-btn:hover, .page-btn.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }

        /* ===== 客户操作界面 ===== */
        .customer-dashboard {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }

        .account-card {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .account-type {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .account-number {
            font-size: 1.5rem;
            letter-spacing: 3px;
            margin: 15px 0;
        }

        .account-balance {
            font-size: 2.2rem;
            font-weight: bold;
            margin: 20px 0;
        }

        .account-info {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        .operation-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .operation-btn {
            flex: 1;
            min-width: 150px;
            padding: 15px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .operation-btn i {
            font-size: 2rem;
            margin-bottom: 12px;
        }

        .operation-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
        }

        /* ===== 模态框样式 ===== */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 25px;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            animation: modalFadeIn 0.3s;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .modal-title {
            font-size: 1.5rem;
            color: #2c3e50;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #7f8c8d;
        }

        .close-btn:hover {
            color: #333;
        }

        .modal-body {
            margin-bottom: 20px;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .modal-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .modal-btn-primary {
            background: #3498db;
            color: white;
        }

        .modal-btn-primary:hover {
            background: #2980b9;
        }

        .modal-btn-secondary {
            background: #95a5a6;
            color: white;
        }

        .modal-btn-secondary:hover {
            background: #7f8c8d;
        }

        /* ===== 动画效果 ===== */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== 响应式设计 ===== */
        @media (max-width: 900px) {
            .main-container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                padding: 15px 0;
            }
            
            .menu {
                display: flex;
                overflow-x: auto;
                padding: 0 15px;
            }
            
            .menu li {
                flex-shrink: 0;
            }
            
            .menu a {
                padding: 12px 20px;
            }
            
            .search-area {
                flex-direction: column;
            }
            
            .search-input, .search-btn, .add-btn {
                width: 100%;
            }
            
            .operation-buttons {
                flex-direction: column;
            }
        }

        @media (max-width: 600px) {
            .user-area {
                flex-direction: column;
                align-items: flex-end;
            }
            
            .user-info span {
                display: none;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- ========== 登录界面 ========== -->
    <div id="loginContainer">
        <div class="login-header">
            <i class="fas fa-university"></i> 银行管理系统
        </div>
        
        <div class="role-tabs">
            <div class="role-tab active" id="adminTab">
                <i class="fas fa-user-cog"></i> 管理员登录
            </div>
            <div class="role-tab" id="customerTab">
                <i class="fas fa-user"></i> 客户登录
            </div>
        </div>
        
        <div class="login-form">
            <div class="form-group">
                <label for="username"><i class="fas fa-user"></i> 用户名</label>
                <input type="text" id="username" placeholder="请输入管理员用户名">
                <div class="error-message" id="usernameError"></div>
            </div>
            
            <div class="form-group">
                <label for="password"><i class="fas fa-lock"></i> 密码</label>
                <input type="password" id="password" placeholder="请输入密码">
                <div class="error-message" id="passwordError"></div>
            </div>
            
            <button class="login-btn" id="loginBtn">
                <i class="fas fa-sign-in-alt"></i> 登录
            </button>
        </div>
    </div>

    <!-- ========== 主系统界面 ========== -->
    <div id="mainSystem">
        <!-- 顶部导航栏 -->
        <header>
            <div class="logo">
                <i class="fas fa-university"></i> 银行管理系统
            </div>
            <div class="user-area">
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">A</div>
                    <span id="userName">管理员</span>
                </div>
                <button class="logout-btn" id="logoutBtn">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </button>
            </div>
        </header>

        <!-- 主体内容 -->
        <div class="main-container">
            <!-- 左侧菜单栏 -->
            <div class="sidebar">
                <h3 id="roleTitle"><i class="fas fa-bars"></i> 管理员模块</h3>
                <ul class="menu" id="sideMenu">
                    <!-- 管理员菜单 -->
                    <li data-role="admin"><a href="#" class="active" data-page="customerManagement"><i class="fas fa-users"></i> 客户管理</a></li>
                    <li data-role="admin"><a href="#" data-page="cardManagement"><i class="fas fa-credit-card"></i> 银行卡管理</a></li>
                    <li data-role="admin"><a href="#" data-page="depositManagement"><i class="fas fa-piggy-bank"></i> 存款业务管理</a></li>
                    <li data-role="admin"><a href="#" data-page="transactionManagement"><i class="fas fa-exchange-alt"></i> 交易管理</a></li>
                    <li data-role="admin"><a href="#" data-page="reportManagement"><i class="fas fa-chart-bar"></i> 统计报表</a></li>
                    
                    <!-- 客户菜单 (默认隐藏) -->
                    <li class="hidden" data-role="customer"><a href="#" data-page="accountDashboard"><i class="fas fa-home"></i> 账户概览</a></li>
                    <li class="hidden" data-role="customer"><a href="#" data-page="depositPage"><i class="fas fa-money-bill-wave"></i> 存款</a></li>
                    <li class="hidden" data-role="customer"><a href="#" data-page="withdrawPage"><i class="fas fa-hand-holding-usd"></i> 取款</a></li>
                    <li class="hidden" data-role="customer"><a href="#" data-page="transferPage"><i class="fas fa-exchange-alt"></i> 转账</a></li>
                    <li class="hidden" data-role="customer"><a href="#" data-page="accountInfo"><i class="fas fa-info-circle"></i> 账户信息</a></li>
                </ul>
            </div>
            
            <!-- 右侧内容区域 -->
            <div class="content">
                <!-- 管理员页面：客户管理 -->
                <div id="customerManagement">
                    <h2 class="page-title"><i class="fas fa-users"></i> 客户管理</h2>
                    
                    <div class="search-area">
                        <input type="text" class="search-input" placeholder="搜索客户..." id="searchInput">
                        <button class="search-btn" id="searchBtn"><i class="fas fa-search"></i> 搜索</button>
                        <button class="add-btn" id="addBtn"><i class="fas fa-plus"></i> 添加客户</button>
                    </div>
                    
                    <div class="data-table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>客户编号</th>
                                    <th>客户姓名</th>
                                    <th>身份证号</th>
                                    <th>联系电话</th>
                                    <th>联系地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="customerTable">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="pagination" id="pagination">
                        <!-- 分页将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <!-- 客户页面：账户概览 -->
                <div id="accountDashboard" class="hidden">
                    <h2 class="page-title"><i class="fas fa-home"></i> 账户概览</h2>
                    
                    <div class="customer-dashboard">
                        <h3>欢迎，<span id="customerNameDisplay">张</span>！</h3>
                        
                        <div class="account-card" id="accountCard">
                            <!-- 账户信息将通过JavaScript动态加载 -->
                        </div>
                        
                        <div class="operation-buttons">
                            <button class="operation-btn" data-operation="deposit">
                                <i class="fas fa-money-bill-wave"></i>
                                <span>存款</span>
                            </button>
                            <button class="operation-btn" data-operation="withdraw">
                                <i class="fas fa-hand-holding-usd"></i>
                                <span>取款</span>
                            </button>
                            <button class="operation-btn" data-operation="transfer">
                                <i class="fas fa-exchange-alt"></i>
                                <span>转账</span>
                            </button>
                            <button class="operation-btn" data-operation="history">
                                <i class="fas fa-history"></i>
                                <span>交易记录</span>
                            </button>
                            <button class="operation-btn" data-operation="manage">
                                <i class="fas fa-cog"></i>
                                <span>账户管理</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 管理员页面：银行卡管理 -->
                <div id="cardManagement" class="hidden">
                    <h2 class="page-title"><i class="fas fa-credit-card"></i> 银行卡管理</h2>
                    
                    <div class="search-area">
                        <input type="text" class="search-input" placeholder="搜索银行卡..." id="cardSearchInput">
                        <button class="search-btn" id="cardSearchBtn"><i class="fas fa-search"></i> 搜索</button>
                        <button class="add-btn" id="addCardBtn"><i class="fas fa-plus"></i> 添加银行卡</button>
                    </div>
                    
                    <div class="data-table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>卡号</th>
                                    <th>客户编号</th>
                                    <th>存款类型</th>
                                    <th>余额</th>
                                    <th>开户日期</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="cardTable">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 管理员页面：存款业务管理 -->
                <div id="depositManagement" class="hidden">
                    <h2 class="page-title"><i class="fas fa-piggy-bank"></i> 存款业务管理</h2>
                    
                    <div class="search-area">
                        <input type="text" class="search-input" placeholder="搜索存款记录..." id="depositSearchInput">
                        <button class="search-btn" id="depositSearchBtn"><i class="fas fa-search"></i> 搜索</button>
                    </div>
                    
                    <div class="data-table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>交易ID</th>
                                    <th>卡号</th>
                                    <th>金额</th>
                                    <th>交易类型</th>
                                    <th>交易日期</th>
                                </tr>
                            </thead>
                            <tbody id="depositTable">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 管理员页面：交易管理 -->
                <div id="transactionManagement" class="hidden">
                    <h2 class="page-title"><i class="fas fa-exchange-alt"></i> 交易管理</h2>
                    
                    <div class="search-area">
                        <input type="text" class="search-input" placeholder="搜索交易记录..." id="transactionSearchInput">
                        <button class="search-btn" id="transactionSearchBtn"><i class="fas fa-search"></i> 搜索</button>
                    </div>
                    
                    <div class="data-table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>交易ID</th>
                                    <th>转出卡号</th>
                                    <th>转入卡号</th>
                                    <th>金额</th>
                                    <th>交易日期</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody id="transactionTable">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 管理员页面：统计报表 -->
                <div id="reportManagement" class="hidden">
                    <h2 class="page-title"><i class="fas fa-chart-bar"></i> 统计报表</h2>
                    
                    <div class="report-container">
                        <div class="report-card">
                            <h3>客户总数</h3>
                            <p id="totalCustomers">0</p>
                        </div>
                        <div class="report-card">
                            <h3>银行卡总数</h3>
                            <p id="totalCards">0</p>
                        </div>
                        <div class="report-card">
                            <h3>存款总额</h3>
                            <p id="totalDeposits">¥0.00</p>
                        </div>
                        <div class="report-card">
                            <h3>交易总数</h3>
                            <p id="totalTransactions">0</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加客户模态框 -->
    <div id="addCustomerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">添加新客户</h3>
                <button class="close-btn" id="closeAddCustomerModal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="addCustomerForm">
                    <div class="form-group">
                        <label for="customerName">客户姓名</label>
                        <input type="text" id="customerName" name="customerName" required>
                    </div>
                    <div class="form-group">
                        <label for="pid">身份证号</label>
                        <input type="text" id="pid" name="pid" required>
                    </div>
                    <div class="form-group">
                        <label for="telephone">联系电话</label>
                        <input type="tel" id="telephone" name="telephone" required>
                    </div>
                    <div class="form-group">
                        <label for="address">联系地址</label>
                        <input type="text" id="address" name="address">
                    </div>
                    <div class="form-group">
                        <label for="password">初始密码</label>
                        <input type="password" id="password" name="password" value="888888">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-btn-secondary" id="cancelAddCustomer">取消</button>
                <button class="modal-btn modal-btn-primary" id="confirmAddCustomer">确认添加</button>
            </div>
        </div>
    </div>

    <!-- 添加银行卡模态框 -->
    <div id="addCardModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">添加银行卡</h3>
                <button class="close-btn" id="closeAddCardModal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="addCardForm">
                    <div class="form-group">
                        <label for="cardId">卡号</label>
                        <input type="text" id="cardId" name="cardId" required>
                    </div>
                    <div class="form-group">
                        <label for="customerId">客户编号</label>
                        <input type="text" id="customerId" name="customerId" required>
                    </div>
                    <div class="form-group">
                        <label for="curId">货币类型</label>
                        <select id="curId" name="curId" required>
                            <option value="CNY">人民币</option>
                            <option value="USD">美元</option>
                            <option value="EUR">欧元</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="savingId">存款类型</label>
                        <select id="savingId" name="savingId" required>
                            <option value="1">活期存款</option>
                            <option value="2">定期存款</option>
                            <option value="3">通知存款</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="openDate">开户日期</label>
                        <input type="date" id="openDate" name="openDate" required>
                    </div>
                    <div class="form-group">
                        <label for="openMoney">开户金额</label>
                        <input type="number" id="openMoney" name="openMoney" min="0" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label for="cardPassword">银行卡密码</label>
                        <input type="password" id="cardPassword" name="cardPassword" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-btn-secondary" id="cancelAddCard">取消</button>
                <button class="modal-btn modal-btn-primary" id="confirmAddCard">确认添加</button>
            </div>
        </div>
    </div>

    <!-- 编辑客户模态框 -->
    <div id="editCustomerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">编辑客户信息</h3>
                <button class="close-btn" id="closeEditCustomerModal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editCustomerForm">
                    <input type="hidden" id="editCustomerId">
                    <div class="form-group">
                        <label for="editCustomerName">客户姓名</label>
                        <input type="text" id="editCustomerName" name="customerName" required>
                    </div>
                    <div class="form-group">
                        <label for="editPid">身份证号</label>
                        <input type="text" id="editPid" name="pid" required>
                    </div>
                    <div class="form-group">
                        <label for="editTelephone">联系电话</label>
                        <input type="tel" id="editTelephone" name="telephone" required>
                    </div>
                    <div class="form-group">
                        <label for="editAddress">联系地址</label>
                        <input type="text" id="editAddress" name="address">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-btn-secondary" id="cancelEditCustomer">取消</button>
                <button class="modal-btn modal-btn-primary" id="confirmEditCustomer">确认修改</button>
            </div>
        </div>
    </div>

    <script>
        // ===== DOM元素 =====
        const loginContainer = document.getElementById('loginContainer');
        const mainSystem = document.getElementById('mainSystem');
        const adminTab = document.getElementById('adminTab');
        const customerTab = document.getElementById('customerTab');
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const loginBtn = document.getElementById('loginBtn');
        const logoutBtn = document.getElementById('logoutBtn');
        const usernameError = document.getElementById('usernameError');
        const passwordError = document.getElementById('passwordError');
        const userAvatar = document.getElementById('userAvatar');
        const userName = document.getElementById('userName');
        const roleTitle = document.getElementById('roleTitle');
        const sideMenu = document.getElementById('sideMenu');
        const customerNameDisplay = document.getElementById('customerNameDisplay');
        const customerTable = document.getElementById('customerTable');
        const pagination = document.getElementById('pagination');
        const accountCard = document.getElementById('accountCard');
        const searchInput = document.getElementById('searchInput');
        const searchBtn = document.getElementById('searchBtn');
        const addBtn = document.getElementById('addBtn');

        // 模态框相关元素
        const addCustomerModal = document.getElementById('addCustomerModal');
        const editCustomerModal = document.getElementById('editCustomerModal');
        const closeAddCustomerModal = document.getElementById('closeAddCustomerModal');
        const closeEditCustomerModal = document.getElementById('closeEditCustomerModal');
        const cancelAddCustomer = document.getElementById('cancelAddCustomer');
        const cancelEditCustomer = document.getElementById('cancelEditCustomer');
        const confirmAddCustomer = document.getElementById('confirmAddCustomer');
        const confirmEditCustomer = document.getElementById('confirmEditCustomer');
        const addCustomerForm = document.getElementById('addCustomerForm');
        const editCustomerForm = document.getElementById('editCustomerForm');

        // ===== 全局变量 =====
        let currentUser = null;
        let currentRole = 'admin'; // 默认管理员登录
        let currentPage = 1;
        const perPage = 10;

        // ===== 辅助函数 =====
        function showLoading(element) {
            element.classList.add('loading');
        }

        function hideLoading(element) {
            element.classList.remove('loading');
        }

        function showError(element, message) {
            element.textContent = message;
            element.style.display = 'block';
        }

        function hideError(element) {
            element.style.display = 'none';
        }

        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN');
        }

        function formatCurrency(amount) {
            return '¥ ' + parseFloat(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        // ===== API请求函数 =====
        async function apiRequest(url, method = 'GET', data = null) {
            const options = {
                method,
                headers: {
                    'Content-Type': 'application/json'
                },
                credentials: 'include' // 包含cookie
            };

            if (data) {
                options.body = JSON.stringify(data);
            }

            try {
                const response = await fetch(url, options);
                const result = await response.json();

                if (!response.ok) {
                    throw new Error(result.message || '请求失败');
                }

                return result;
            } catch (error) {
                console.error('API请求错误:', error);
                throw error;
            }
        }

        // ===== 角色切换 =====
        adminTab.addEventListener('click', function() {
            adminTab.classList.add('active');
            customerTab.classList.remove('active');
            currentRole = 'admin';
            usernameInput.placeholder = "请输入管理员用户名";
        });

        customerTab.addEventListener('click', function() {
            customerTab.classList.add('active');
            adminTab.classList.remove('active');
            currentRole = 'customer';
            usernameInput.placeholder = "请输入客户用户名";
        });

        // ===== 登录功能 =====
        loginBtn.addEventListener('click', async function() {
            const username = usernameInput.value.trim();
            const password = passwordInput.value.trim();
            
            // 重置错误提示
            hideError(usernameError);
            hideError(passwordError);
            
            // 验证输入
            if (!username) {
                showError(usernameError, '用户名不能为空');
                return;
            }
            
            if (!password) {
                showError(passwordError, '密码不能为空');
                return;
            }
            
            showLoading(loginBtn);

            try {
                const response = await apiRequest('/login', 'POST', {
                    username,
                    password,
                    role: currentRole
                });

                // 登录成功
                currentUser = response.user;
                
                // 更新用户界面
                userAvatar.textContent = currentUser.avatar || currentUser.name.charAt(0);
                userName.textContent = currentUser.name;
                
                // 根据角色更新菜单
                updateMenuForRole(currentUser.is_admin ? 'admin' : 'customer');
                
                // 显示主系统
                loginContainer.classList.add('hidden');
                mainSystem.style.display = 'block';
                
                // 更新客户名称显示
                if (!currentUser.is_admin) {
                    customerNameDisplay.textContent = currentUser.name;
                    loadCustomerAccount();
                }
            } catch (error) {
                showError(usernameError, error.message || '登录失败');
            } finally {
                hideLoading(loginBtn);
            }
        });

        // ===== 更新菜单根据角色 =====
        function updateMenuForRole(role) {
            // 更新角色标题
            roleTitle.innerHTML = `<i class="fas fa-${role === 'admin' ? 'user-cog' : 'user'}"></i> ${role === 'admin' ? '管理员' : '客户'}模块`;
            
            // 显示/隐藏菜单项
            const menuItems = document.querySelectorAll('.menu li');
            menuItems.forEach(item => {
                const roleSpecific = item.getAttribute('data-role');
                if (roleSpecific) {
                    item.classList.toggle('hidden', roleSpecific !== role);
                }
            });
            
            // 激活第一个菜单项
            const firstMenuItem = document.querySelector(`.menu li:not(.hidden) a`);
            if (firstMenuItem) {
                // 移除所有活动状态
                document.querySelectorAll('.menu a').forEach(a => a.classList.remove('active'));
                // 添加活动状态
                firstMenuItem.classList.add('active');
                
                // 显示对应页面
                showPage(firstMenuItem.getAttribute('data-page'));
            }
        }

        // ===== 显示页面函数 =====
        // 加载银行卡数据
        async function loadCards(search = '') {
            showLoading(document.getElementById('cardTable'));
            
            try {
                let url = '/admin/cards';
                if (search) {
                    url += `?search=${encodeURIComponent(search)}`;
                }
                
                const data = await apiRequest(url);
                renderCards(data.cards);
            } catch (error) {
                console.error('加载银行卡数据失败:', error);
                document.getElementById('cardTable').innerHTML = `<tr><td colspan="7" style="text-align: center; color: #e74c3c;">加载数据失败: ${error.message}</td></tr>`;
            } finally {
                hideLoading(document.getElementById('cardTable'));
            }
        }

        function renderCards(cards) {
            const table = document.getElementById('cardTable');
            table.innerHTML = '';
            
            if (cards.length === 0) {
                table.innerHTML = '<tr><td colspan="7" style="text-align: center;">没有找到银行卡数据</td></tr>';
                return;
            }
            
            cards.forEach(card => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${card.card_id}</td>
                    <td>${card.customer_id}</td>
                    <td>${card.deposit_type}</td>
                    <td>${formatCurrency(card.balance)}</td>
                    <td>${card.open_date}</td>
                    <td>${card.is_report_loss ? '<span style="color: #e74c3c;">已挂失</span>' : '<span style="color: #2ecc71;">正常</span>'}</td>
                    <td>
                        <button class="action-btn edit-btn" data-id="${card.card_id}"><i class="fas fa-edit"></i> 编辑</button>
                        ${card.is_report_loss ? 
                            '<button class="action-btn" style="background: #3498db;"><i class="fas fa-unlock"></i> 解挂</button>' : 
                            '<button class="action-btn" style="background: #e74c3c;"><i class="fas fa-lock"></i> 挂失</button>'}
                    </td>
                `;
                table.appendChild(row);
            });
        }

        // 加载存款记录
        async function loadDeposits(search = '') {
            showLoading(document.getElementById('depositTable'));
            
            try {
                let url = '/admin/deposits';
                if (search) {
                    url += `?search=${encodeURIComponent(search)}`;
                }
                
                const data = await apiRequest(url);
                renderDeposits(data.deposits);
            } catch (error) {
                console.error('加载存款记录失败:', error);
                document.getElementById('depositTable').innerHTML = `<tr><td colspan="5" style="text-align: center; color: #e74c3c;">加载数据失败: ${error.message}</td></tr>`;
            } finally {
                hideLoading(document.getElementById('depositTable'));
            }
        }

        function renderDeposits(deposits) {
            const table = document.getElementById('depositTable');
            table.innerHTML = '';
            
            if (deposits.length === 0) {
                table.innerHTML = '<tr><td colspan="5" style="text-align: center;">没有找到存款记录</td></tr>';
                return;
            }
            
            deposits.forEach(deposit => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${deposit.id}</td>
                    <td>${deposit.card_id}</td>
                    <td>${formatCurrency(deposit.amount)}</td>
                    <td>${deposit.type}</td>
                    <td>${deposit.date}</td>
                `;
                table.appendChild(row);
            });
        }

        // 加载交易记录
        async function loadTransactions(search = '') {
            showLoading(document.getElementById('transactionTable'));
            
            try {
                let url = '/admin/transactions';
                if (search) {
                    url += `?search=${encodeURIComponent(search)}`;
                }
                
                const data = await apiRequest(url);
                renderTransactions(data.transactions);
            } catch (error) {
                console.error('加载交易记录失败:', error);
                document.getElementById('transactionTable').innerHTML = `<tr><td colspan="6" style="text-align: center; color: #e74c3c;">加载数据失败: ${error.message}</td></tr>`;
            } finally {
                hideLoading(document.getElementById('transactionTable'));
            }
        }

        function renderTransactions(transactions) {
            const table = document.getElementById('transactionTable');
            table.innerHTML = '';
            
            if (transactions.length === 0) {
                table.innerHTML = '<tr><td colspan="6" style="text-align: center;">没有找到交易记录</td></tr>';
                return;
            }
            
            transactions.forEach(transaction => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${transaction.id}</td>
                    <td>${transaction.from_card}</td>
                    <td>${transaction.to_card}</td>
                    <td>${formatCurrency(transaction.amount)}</td>
                    <td>${transaction.date}</td>
                    <td>${transaction.status === '成功' ? '<span style="color: #2ecc71;">成功</span>' : '<span style="color: #e74c3c;">失败</span>'}</td>
                `;
                table.appendChild(row);
            });
        }

        // 加载统计报表
        async function loadReports() {
            showLoading(document.querySelector('.report-container'));
            
            try {
                const data = await apiRequest('/admin/reports/overview');
                
                document.getElementById('totalCustomers').textContent = data.total_customers;
                document.getElementById('totalCards').textContent = data.total_cards;
                document.getElementById('totalDeposits').textContent = formatCurrency(data.total_deposits);
                document.getElementById('totalTransactions').textContent = data.total_transactions;
            } catch (error) {
                console.error('加载统计报表失败:', error);
                document.querySelector('.report-container').innerHTML = `<div style="color: #e74c3c; text-align: center;">加载报表失败: ${error.message}</div>`;
            } finally {
                hideLoading(document.querySelector('.report-container'));
            }
        }

        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.content > div').forEach(div => {
                div.classList.add('hidden');
            });
            
            // 显示目标页面
            const targetPage = document.getElementById(pageId);
            if (targetPage) {
                targetPage.classList.remove('hidden');
                
                // 根据页面加载数据
                if (pageId === 'customerManagement') {
                    loadCustomers();
                } else if (pageId === 'accountDashboard') {
                    loadCustomerAccount();
                } else if (pageId === 'cardManagement') {
                    loadCards();
                } else if (pageId === 'depositManagement') {
                    loadDeposits();
                } else if (pageId === 'transactionManagement') {
                    loadTransactions();
                } else if (pageId === 'reportManagement') {
                    loadReports();
                }
            }
        }

        // ===== 菜单点击事件 =====
        sideMenu.addEventListener('click', function(e) {
            if (e.target.tagName === 'A') {
                e.preventDefault();
                
                // 移除所有活动状态
                document.querySelectorAll('.menu a').forEach(a => a.classList.remove('active'));
                
                // 添加活动状态到当前菜单项
                e.target.classList.add('active');
                
                // 显示对应页面
                const pageId = e.target.getAttribute('data-page');
                showPage(pageId);
            }
        });

        // ===== 退出功能 =====
        logoutBtn.addEventListener('click', async function() {
            if (confirm('确定要退出系统吗？')) {
                try {
                    await apiRequest('/logout', 'POST');
                    
                    // 重置登录表单
                    usernameInput.value = '';
                    passwordInput.value = '';
                    
                    // 显示登录界面
                    mainSystem.style.display = 'none';
                    loginContainer.classList.remove('hidden');
                    
                    // 重置菜单
                    adminTab.click();
                } catch (error) {
                    console.error('退出失败:', error);
                    alert('退出失败，请重试');
                }
            }
        });

        // ===== 客户管理功能 =====
        async function loadCustomers(page = 1, search = '') {
            showLoading(customerTable);
            
            try {
                let url = `/admin/customers?page=${page}&per_page=${perPage}`;
                if (search) {
                    url += `&search=${encodeURIComponent(search)}`;
                }
                
                const data = await apiRequest(url);
                
                renderCustomers(data.customers);
                renderPagination(data.total, data.pages, page);
            } catch (error) {
                console.error('加载客户数据失败:', error);
                customerTable.innerHTML = `<tr><td colspan="6" style="text-align: center; color: #e74c3c;">加载数据失败: ${error.message}</td></tr>`;
            } finally {
                hideLoading(customerTable);
            }
        }

        function renderCustomers(customers) {
            customerTable.innerHTML = '';
            
            if (customers.length === 0) {
                customerTable.innerHTML = '<tr><td colspan="6" style="text-align: center;">没有找到客户数据</td></tr>';
                return;
            }
            
            customers.forEach(customer => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${customer.customer_id}</td>
                    <td>${customer.customer_name}</td>
                    <td>${customer.pid}</td>
                    <td>${customer.telephone}</td>
                    <td>${customer.address || '-'}</td>
                    <td>
                        <button class="action-btn edit-btn" data-id="${customer.customer_id}"><i class="fas fa-edit"></i> 编辑</button>
                        <button class="action-btn delete-btn" data-id="${customer.customer_id}"><i class="fas fa-trash"></i> 删除</button>
                    </td>
                `;
                customerTable.appendChild(row);
            });
        }

        function renderPagination(total, pages, currentPage) {
            pagination.innerHTML = '';
            
            if (pages <= 1) return;
            
            // 上一页按钮
            if (currentPage > 1) {
                const prevBtn = document.createElement('button');
                prevBtn.className = 'page-btn';
                prevBtn.innerHTML = '&laquo;';
                prevBtn.addEventListener('click', () => {
                    loadCustomers(currentPage - 1, searchInput.value.trim());
                });
                pagination.appendChild(prevBtn);
            }
            
            // 页码按钮
            for (let i = 1; i <= pages; i++) {
                const pageBtn = document.createElement('button');
                pageBtn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
                pageBtn.textContent = i;
                pageBtn.addEventListener('click', () => {
                    if (i !== currentPage) {
                        loadCustomers(i, searchInput.value.trim());
                    }
                });
                pagination.appendChild(pageBtn);
            }
            
            // 下一页按钮
            if (currentPage < pages) {
                const nextBtn = document.createElement('button');
                nextBtn.className = 'page-btn';
                nextBtn.innerHTML = '&raquo;';
                nextBtn.addEventListener('click', () => {
                    loadCustomers(currentPage + 1, searchInput.value.trim());
                });
                pagination.appendChild(nextBtn);
            }
        }

        // ===== 客户账户功能 =====
        async function loadCustomerAccount() {
            showLoading(accountCard);
            
            try {
                const data = await apiRequest('/customer/account');
                
                // 假设每个客户只有一个账户（简化处理）
                const account = data.cards[0];
                
                accountCard.innerHTML = `
                    <div class="account-type">${account.deposit_type || '储蓄账户'}</div>
                    <div class="account-number">${account.card_id.replace(/(\d{4})(?=\d)/g, '$1 ')}</div>
                    <div class="account-balance">${formatCurrency(account.balance)}</div>
                    <div class="account-info">
                        <div>开户日期：${formatDate(account.open_date)}</div>
                        <div>账户状态：${account.is_report_loss ? '已挂失' : '正常'}</div>
                    </div>
                `;
            } catch (error) {
                console.error('加载账户信息失败:', error);
                accountCard.innerHTML = '<div style="color: #e74c3c;">加载账户信息失败</div>';
            } finally {
                hideLoading(accountCard);
            }
        }

        // ===== 搜索功能 =====
        searchBtn.addEventListener('click', function() {
            const searchTerm = searchInput.value.trim();
            loadCustomers(1, searchTerm);
        });

        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchTerm = searchInput.value.trim();
                loadCustomers(1, searchTerm);
            }
        });

        // 银行卡搜索
        document.getElementById('cardSearchBtn').addEventListener('click', function() {
            const searchTerm = document.getElementById('cardSearchInput').value.trim();
            loadCards(searchTerm);
        });

        document.getElementById('cardSearchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchTerm = e.target.value.trim();
                loadCards(searchTerm);
            }
        });

        // 存款记录搜索
        document.getElementById('depositSearchBtn').addEventListener('click', function() {
            const searchTerm = document.getElementById('depositSearchInput').value.trim();
            loadDeposits(searchTerm);
        });

        document.getElementById('depositSearchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchTerm = e.target.value.trim();
                loadDeposits(searchTerm);
            }
        });

        // 交易记录搜索
        document.getElementById('transactionSearchBtn').addEventListener('click', function() {
            const searchTerm = document.getElementById('transactionSearchInput').value.trim();
            loadTransactions(searchTerm);
        });

        document.getElementById('transactionSearchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchTerm = e.target.value.trim();
                loadTransactions(searchTerm);
            }
        });

        // ===== 添加银行卡功能 =====
        document.getElementById('addCardBtn').addEventListener('click', function() {
            document.getElementById('addCardForm').reset();
            document.getElementById('addCardModal').style.display = 'block';
        });

        document.getElementById('closeAddCardModal').addEventListener('click', function() {
            document.getElementById('addCardModal').style.display = 'none';
        });

        document.getElementById('cancelAddCard').addEventListener('click', function() {
            document.getElementById('addCardModal').style.display = 'none';
        });

        document.getElementById('confirmAddCard').addEventListener('click', async function() {
            const formData = {
                card_id: document.getElementById('cardId').value.trim(),
                customer_id: document.getElementById('customerId').value.trim(),
                cur_id: document.getElementById('curId').value,
                saving_id: document.getElementById('savingId').value,
                open_date: document.getElementById('openDate').value,
                open_money: parseFloat(document.getElementById('openMoney').value),
                password: document.getElementById('cardPassword').value.trim()
            };

            // 简单验证
            if (!formData.card_id || !formData.customer_id || !formData.open_date || !formData.open_money || !formData.password) {
                alert('请填写必填字段');
                return;
            }

            showLoading(document.getElementById('confirmAddCard'));

            try {
                await apiRequest('/admin/cards', 'POST', formData);
                document.getElementById('addCardModal').style.display = 'none';
                loadCards(); // 刷新列表
            } catch (error) {
                alert(`添加银行卡失败: ${error.message}`);
            } finally {
                hideLoading(document.getElementById('confirmAddCard'));
            }
        });

        // ===== 添加客户功能 =====
        addBtn.addEventListener('click', function() {
            addCustomerForm.reset();
            addCustomerModal.style.display = 'block';
        });

        closeAddCustomerModal.addEventListener('click', function() {
            addCustomerModal.style.display = 'none';
        });

        cancelAddCustomer.addEventListener('click', function() {
            addCustomerModal.style.display = 'none';
        });

        confirmAddCustomer.addEventListener('click', async function() {
            const formData = {
                customerName: document.getElementById('customerName').value.trim(),
                pid: document.getElementById('pid').value.trim(),
                telephone: document.getElementById('telephone').value.trim(),
                address: document.getElementById('address').value.trim(),
                password: document.getElementById('password').value.trim() || '888888'
            };

            // 简单验证
            if (!formData.customerName || !formData.pid || !formData.telephone) {
                alert('请填写必填字段');
                return;
            }

            showLoading(confirmAddCustomer);

            try {
                await apiRequest('/admin/customers', 'POST', formData);
                addCustomerModal.style.display = 'none';
                loadCustomers(); // 刷新列表
            } catch (error) {
                alert(`添加客户失败: ${error.message}`);
            } finally {
                hideLoading(confirmAddCustomer);
            }
        });

        // ===== 编辑客户功能 =====
        customerTable.addEventListener('click', function(e) {
            if (e.target.classList.contains('edit-btn')) {
                const customerId = e.target.getAttribute('data-id');
                const row = e.target.closest('tr');
                const cells = row.querySelectorAll('td');
                
                document.getElementById('editCustomerId').value = customerId;
                document.getElementById('editCustomerName').value = cells[1].textContent;
                document.getElementById('editPid').value = cells[2].textContent;
                document.getElementById('editTelephone').value = cells[3].textContent;
                document.getElementById('editAddress').value = cells[4].textContent === '-' ? '' : cells[4].textContent;
                
                editCustomerModal.style.display = 'block';
            }
        });

        closeEditCustomerModal.addEventListener('click', function() {
            editCustomerModal.style.display = 'none';
        });

        cancelEditCustomer.addEventListener('click', function() {
            editCustomerModal.style.display = 'none';
        });

        confirmEditCustomer.addEventListener('click', async function() {
            const customerId = document.getElementById('editCustomerId').value;
            const formData = {
                customerName: document.getElementById('editCustomerName').value.trim(),
                pid: document.getElementById('editPid').value.trim(),
                telephone: document.getElementById('editTelephone').value.trim(),
                address: document.getElementById('editAddress').value.trim()
            };

            // 简单验证
            if (!formData.customerName || !formData.pid || !formData.telephone) {
                alert('请填写必填字段');
                return;
            }

            showLoading(confirmEditCustomer);

            try {
                await apiRequest(`/admin/customers/${customerId}`, 'PUT', formData);
                editCustomerModal.style.display = 'none';
                loadCustomers(currentPage, searchInput.value.trim()); // 刷新当前页
            } catch (error) {
                alert(`更新客户信息失败: ${error.message}`);
            } finally {
                hideLoading(confirmEditCustomer);
            }
        });

        // ===== 删除客户功能 =====
        customerTable.addEventListener('click', async function(e) {
            if (e.target.classList.contains('delete-btn')) {
                const customerId = e.target.getAttribute('data-id');
                
                if (confirm('确定要删除此客户吗？此操作不可恢复！')) {
                    try {
                        await apiRequest(`/admin/customers/${customerId}`, 'DELETE');
                        loadCustomers(currentPage, searchInput.value.trim()); // 刷新当前页
                    } catch (error) {
                        alert(`删除客户失败: ${error.message}`);
                    }
                }
            }
        });

        // ===== 客户操作按钮事件 =====
        document.querySelector('.operation-buttons')?.addEventListener('click', function(e) {
            if (e.target.closest('.operation-btn')) {
                const operation = e.target.closest('.operation-btn').getAttribute('data-operation');
                
                switch (operation) {
                    case 'deposit':
                        alert('存款功能将在后续实现');
                        break;
                    case 'withdraw':
                        alert('取款功能将在后续实现');
                        break;
                    case 'transfer':
                        alert('转账功能将在后续实现');
                        break;
                    case 'history':
                        alert('交易记录功能将在后续实现');
                        break;
                    case 'manage':
                        alert('账户管理功能将在后续实现');
                        break;
                }
            }
        });

        // ===== 模态框外部点击关闭 =====
        window.addEventListener('click', function(e) {
            if (e.target === addCustomerModal) {
                addCustomerModal.style.display = 'none';
            }
            if (e.target === editCustomerModal) {
                editCustomerModal.style.display = 'none';
            }
        });

        // ===== 初始化页面 =====
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认登录状态
            adminTab.click();
        });
    </script>
</body>
</html>